import React from "react";
import { useAppDispatch} from "../../../redux/hooks";
import {ControlBar} from "../../control-bar";
import {WorkInfo, updateWorkInfo, deleteWorkInfo} from "../../../redux";
import {Col, Row} from "antd";
import {EditableDateText} from "../../editable-date-text";
import {EditableText} from "../../editable-text";
import {MyEditor} from "../../my-editor";
import {ClsControl} from "../../block-control";

interface PropsType {
    index: number,
    workInfo: WorkInfo
}

export const RWorkExperienceItem: React.FC<PropsType> = ({
    index, workInfo
}) => {

    const dispatch = useAppDispatch();

    return <ClsControl controlBar={
        <ControlBar
    style={{right: '-36px', top: '50%', flexDirection: 'column', transform: 'translateY(-50%)'}}
    displayConfig={{delete: true}}
    onClickDelete={() => {
        dispatch(deleteWorkInfo({index}))
    }}
    />
    }>
        <Row gutter={10} justify={"space-between"}>
            <Col>
                <EditableDateText
                    defaultStartDate={workInfo.beginDate}
                    defaultEndDate={workInfo.endDate}
                    onDateChange={([startDate, endDate]) => {
                    dispatch(updateWorkInfo({
                        index, updateValue: { beginDate: startDate, endDate}
                    }))
                }}></EditableDateText>
            </Col>
            <Col>
                <EditableText
                    defaultText={workInfo.companyName}
                    onTextChange={(companyName) => {
                    dispatch(updateWorkInfo({
                        index, updateValue: { companyName }
                    }))
                }} placeholder={'公司名称'}></EditableText>
            </Col>
        </Row>
        <Row gutter={10}>
            <Col>
                <EditableText
                    defaultText={workInfo.industry}
                    onTextChange={(industry) => {
                    dispatch(updateWorkInfo({
                        index, updateValue: { industry }
                    }))
                }} placeholder={'行业'}></EditableText>
            </Col>
            <Col>
                <span > | </span>
            </Col>
            <Col>
                <EditableText
                    defaultText={workInfo.jobTitle}
                    onTextChange={(jobTitle) => {
                    dispatch(updateWorkInfo({
                        index, updateValue: { jobTitle }
                    }))
                }} placeholder={'工作岗位'}></EditableText>
            </Col>
        </Row>
        <MyEditor
            defaultHtml={workInfo.detail}
            onContentChange={(html) => {
            dispatch(updateWorkInfo({
                index, updateValue: { detail: html }
            }))
        }}></MyEditor>
    </ClsControl>
}
